<template>
	<view class="bg">
		<view class="top">
			<view class="line">
				<view class="label">运单号</view>
				<view class="text">{{order.trackNumber}}</view>
			</view>
			<view class="line">
				<view class="label">运费金额</view>
				<view class="text"><text style="font-size: 20upx">￥</text>{{order.price}}</view>
			</view>
		</view>
		<view class="body">
			<view class="line-info">
				<view class="label-info">收件人</view>
				<view class="value-info">{{order.receiveName}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">手机号</view>
				<view class="value-info">{{order.phoneNumber}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">收件地址</view>
				<view class="value-info">{{order.address}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">订单状态</view>
				<view class="value-info">{{order.dictStatusName}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">创建时间</view>
				<view class="value-info">{{order.insertTime}}</view>
			</view>
			<view class="line-info" v-if="order.dictStatus=='NOTPROCESSED'">
				<view class="label-info"></view>
				<view class="value-info" style="color: #408CFF;" @click="openPopup">修改地址</view>
			</view>
		</view>
		<view class="body">
			<view class="line-info">
				<view class="label-info">换卡卡号</view>
				<view class="value-info">
					{{order.cardNumber}}
					<text style="margin-left: 5px; font-size: 10px; color: #408CFF;" v-show="!showMore&&order.cardList&&order.cardList.length>1" @click="showMore=true">展开</text>
					<text style="margin-left: 5px; font-size: 10px; color: #408CFF;" v-show="showMore&&order.cardList&&order.cardList.length>1" @click="showMore=falase">收起</text>
				</view>
			</view>
			<view class="line-more" v-show="order.cardList&&order.cardList.length>1&&showMore&&index>0" v-for="(item,index) in order.cardList" :key="index">
				<view >{{item.oldCardNumber}}</view>
				<!-- v-if="index>0" -->
			</view>
			<view class="line-info">
				<view class="label-info">备注</view>
				<view class="value-info">{{order.remark}}</view>
			</view>
		</view>
		<!-- 修改换卡地址 -->
		<view class="div-dialog" v-if="showPopup">
			<view class="div-dialog-body">
				<view class="div-dialog-body-title">
					<text>填写地址</text>
					<text><i class="iconfont icon-shanchu close" @click="closePopup">关闭</i></text>
				</view>
				<view class="div-dialog-body-table">
					<view class="label">收件人：</view>
					<view class="value" :style="{'border-bottom':nameSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<input v-model="info.name" class="uni-input" placeholder-style="color:#999999" placeholder="请输入收件人姓名" @input='inputName' :disabled="disabled" @focus="focusName"/>
					</view>
					<view class="label">手机号：</view>
					<view class="value" :style="{'border-bottom':phoneSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<input v-model="info.phone" class="uni-input" placeholder-style="color:#999999" placeholder="请输入收件人手机号" @input='inputPhone' :disabled="disabled" @focus="focusPhone"/>
					</view>
					<view class="label">区域：</view>
					<view class="value" :style="{'border-bottom':areaSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<div class="input-style uni-input sheng-shi-qu" @click="$refs.simpleAddress.open()">
							{{info.area}}
						</div>
					</view>
					<view class="label">详细地址：</view>
					<view class="value" :style="{'border-bottom':addrSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<input v-model="info.address" class="uni-input" placeholder-style="color:#999999" placeholder="请输入详细地址" @input='inputAddr' :disabled="disabled" @focus="focusAddr"/>
					</view>
				</view>
				<view class="btn-line">
					<button class="btn" :loading="disabled" @click="saveNewAddr">保存</button>
				</view>
				<img src='../../../static/img/map.svg' class="img-bg" />
			</view>
		</view>
		<simple-address ref="simpleAddress" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.nvue';
	import pay from '@/utils/wxpayUtils.js'
	import { decryptDes } from '@/utils/utils'
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				orderId: '',
				cardId: '',
				cardNumber: '',
				order: {},
				showMore: false,
				showPopup: false,
				disabled: false,
				nameSelect: false,
				areaSelect: false,
				addrSelect: false,
				phoneSelect: false,
				info: {
					address: '',
					phone: '',
					name: '',
					area: '省/市/区',
				},
				pagekey: '',
			}
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
				WeixinJSBridge.invoke('setFontSizeCallback', {
					'fontSize': 0
				});
				// 重写设置网页字体大小的事件
				WeixinJSBridge.on('menu:setfont', function() {
					WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
				});
			};
			this.orderId = option.orderId;
			this.initData();
		},
		methods: {
			async initData() {
				let a = await this.$req.crm('/expressinformation/getExpressinformation', {
					id: this.orderId
				})
				this.order = {
					price: a.data.price ? a.data.price.toFixed(2) : 0.00,
					insertTime: a.data.insertTime ? a.data.insertTime : '--',
					dictStatusName: a.data.dictStatusName ? a.data.dictStatusName : '--',
					phoneNumber: a.data.phoneNumber ? a.data.phoneNumber : '--',
					receiveName: a.data.receiveName ? a.data.receiveName : '--',
					trackNumber: a.data.trackNumber ? a.data.trackNumber : '--',
					address: a.data.address ? a.data.address : '--',
					remark: a.data.remark ? a.data.remark : '--',
					cardList: a.data.cardNumberVOList?a.data.cardNumberVOList: [],
					cardNumber:a.data.cardNumberVOList.length>0?a.data.cardNumberVOList[0].oldCardNumber:'--',
					dictStatus:a.data.dictStatus?a.data.dictStatus:''
				}
			},
			async openPopup(){
				this.showPopup = true;
				this.info = {
					address: '',
					phone: '',
					area: '省/市/区',
					name: '',
				}
				this.pagekey = await this.$getPageKey();
			},
			closePopup(){
				this.showPopup = false;
			},
			async saveNewAddr(){
				if(this.info.name==""||this.info.name.length>5){
					uni.showToast({
						icon: "none",
						title: "请输入正确的收件人！",
						duration: 3000
					});
					return 
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.info.phone))){
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号！",
						duration: 3000
					});
					return 
				}
					
				if(this.info.area=="省/市/区"){
					uni.showToast({
						icon: "none",
						title: "请选择省市区！",
						duration: 3000
					});
					return 
				}
							
				if(this.info.address==""||this.info.address.length>30){
					uni.showToast({
						icon: "none",
						title: "请输入正确的详细地址！(30位以内)",
						duration: 3000
					});
					return 
				}
				this.disabled = true;
				let addr = this.info.area + this.info.address;
				await this.$req.crm('/expressinformation/save/recheck',{
					id: this.orderId,
					address: addr,
					phoneNumber: this.info.phone,
					receiveName: this.info.name,
					pagekey: this.pagekey
				}).then(v=>{
					this.initData()
					this.showPopup = false;
					if(v.code==10000){
						uni.showToast({
							icon: "none",
							title: "修改成功！",
							duration: 3000
						});
					}
					this.disabled = false;
				})
				this.pagekey = await this.$getPageKey();
			},
			inputName(e){
				this.info.name = e.detail.value;
				this.nameSelect = true;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			inputAddr(e){
				this.info.address = e.detail.value;
				this.nameSelect = false;
				this.addrSelect = true;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			inputPhone(e){
				this.info.phoen = e.detail.value;
				this.nameSelect = false;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = true;
			},
			focusName(){
				this.nameSelect = true;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			focusAddr(){
				this.nameSelect = false;
				this.addrSelect = true;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			focusPhone(){
				this.nameSelect = false;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = true;
			},
			onConfirm(e) {
				this.info.area= e.label;
			},
		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
	}

	.top {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 20upx 5%;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}


	.line {
		width: 100%;
		height: 100upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo-img {
		width: 25%;
		height: auto;
	}

	.text {
		width: 70%;
		height: auto;
		font-size: 28upx;
		color: #333;
		text-align: right;
		letter-spacing: 1px;
		font-weight: 700;
	}

	.label {
		width: 25%;
		height: auto;
		font-size: 30upx;
		color: #333;
	}

	.value {
		width: 70%;
		height: auto;
		font-size: 30upx;
		color: #777;
		text-align: right;
		letter-spacing: 1px;
		font-weight: 500;
	}

	.body {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 20upx 5%;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
		margin-top: 20upx;
	}

	.line-info {
		width: 100%;
		height: 70upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.label-info {
		width: 27%;
		height: auto;
		position: relative;
		font-size: 28upx;
		color: #333;
	}

	.value-info {
		width: 70%;
		height: auto;
		position: relative;
		font-size: 28upx;
		color: #777;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.line-more{
		width: 100%;
		height: 60upx;
		position: relative;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28upx;
		color: #777;
	}
	/* 修改地址 */
	.div-dialog{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		z-index: 5;
	}
	.div-dialog-body{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 7;
		border-radius: 4px 4px 0 0;
	}
	.div-dialog-body-title{
		width: 94%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		color: #78A8F2;
		padding: 10upx 3%;
	}
	.div-dialog-body-table{
		width: 82%;
		height: auto;
		position: relative;
		padding-bottom: 20upx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		align-items: center;
		justify-content: flex-start;
		margin: 1% 5%;
		z-index: 6;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: 0 4% 20upx 4%;
	}
	.label{
		width: 100%;
		height: 50upx;
		position: relative;
		line-height: 50upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
	}
	.uni-input {
	    height: 50upx;
	    line-height: 25px;
	    font-size: 30upx;
	    background: rgba(255,255,255,0);
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.btn-line{
		width: 90%;
		height: 70upx;
		position: relative;
		margin: 20px 5%;
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		letter-spacing: 5px;
	}
	.close{
		color: #999;
		font-size: 28upx;
	}
	.img-bg{
		width: 35%;
		height: auto;
		position: absolute;
		top: 45%;
		right: 15%;
		opacity: 0.5;
		z-index: 1;
	}
</style>
